<template>
  <div class="padding-trbl-20">
    <!-- 条件筛选 S -->
    <div class="searchBox rela flex-row row-between margin-b-20">
      <div class="search_l_bg abso bg-themecolor"></div>
      <div class="search_l">
        <div class="searchItem flex-row">
          <div class="flex-row font-14">
            选择日期：
            <el-date-picker
              v-model="selectTimeVal"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :picker-options="pickerOptions"
              @change="timeValChange"
            >
            </el-date-picker>
            <span class="line-block margin-l-20">当前周：{{ timeFrame }}</span>
          </div>
        </div>
      </div>
      <!-- <div class="exportBtn pointer bg-themecolor text-white padding-lr-10 abso">导出周报</div> -->
    </div>
    <!-- 条件筛选 E -->
    <div class="flex-row width100">
      <div class="card1 margin-r-20">
        <el-card>
          <Title title="本周工单办理量统计"></Title>
          <div class="flex-row">
            <div class="bumen_card1Echart" id="bumen_card1Echart"></div>
            <div class="card1Echart_l">
              <div class="font-20 pointer" @click="orderListChange('week')">
                <div class="font-32 number">
                  {{ WeekGdBlTj.count }}
                  <span class="font-14 text-gray">件</span>
                </div>
                本周工单处理量
              </div>
              <div class="font-20 margin-t-30">
                <div
                  class="font-32 number"
                  :style="{ color: WeekGdBlTj.add ? '#38d21e' : '#ff3a3a' }"
                >
                  {{ WeekGdBlTj.count > 0 ? WeekGdBlTj.huanbiPct : 0 }}%
                  <img
                    src="../../../assets/images/rise.png"
                    class="trendImg"
                    v-if="WeekGdBlTj.add"
                  />
                  <img
                    src="../../../assets/images/decline.png"
                    class="trendImg"
                    v-else
                  />
                </div>
                环比上周{{ WeekGdBlTj.add ? '上升' : '降低' }}
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="card2 rela">
        <el-card>
          <Title title="本周工单来源统计"></Title>
          <div class="text-gray font-12 company abso">
            单位：件
          </div>
          <div
            class="bumen_card2Echart margin-t-40"
            id="bumen_card2Echart"
          ></div>
        </el-card>
      </div>
    </div>
    <div class="width100 card3 margin-t-20">
      <el-card class="padding-b-30">
        <Title title="诉求量较多工单分类统计"></Title>
        <div class="wordOrderList flex-row">
          <div
            class="wordTypeItem padding-l-80 pointer"
            :class="[
              index < card3Data.length - 1 ? 'border-right padding-r-80' : ''
            ]"
            v-for="(item, index) in card3Data"
            :key="index"
            @click="orderListChange('week', item)"
          >
            <div class="font-22 text-dark-grey text-line-cut describeTitle">
              {{ item.describe }}
            </div>
            <el-progress
              :show-text="false"
              :stroke-width="18"
              :percentage="item.percentage"
              class="margin-t-30 margin-b-40"
            ></el-progress>
            <div class="describe font-14 flex-row row-between">
              <div>
                {{ item.typaName }}
                <span class="font-32">{{ item.percentage }}%</span>
              </div>
              <div class="font-32">
                {{ item.count }} <span class="font-14">件</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 工单列表 -->
    <el-dialog
      title="工单列表"
      :visible.sync="orderListShow"
      width="100%"
      :fullscreen="fullScreen"
      @close="clearSearch"
    >
      <orderList
        v-if="orderListShow"
        ref="orderlist"
        :duration="duration"
        :date="date"
        :sourceId="sourceId"
        :nrlb="majorCatId"
      ></orderList>
    </el-dialog>
  </div>
</template>
<script>
import Title from '../../../components/title.vue'
import orderList from './order/orderlist.vue'
import * as echarts from 'echarts'
export default {
  components: {
    Title,
    orderList
  },
  data () {
    return {
      selectTimeVal: '',
      pickerOptions: {
        disabledDate (time) {
          let startYear = '1577808000000'
          return time.getTime() > Date.now() || time.getTime() < startYear
        }
      },
      timeFrame: '',
      WeekGdBlTj: [],
      card3Data: [],
      orderListShow: false,
      fullScreen: true,
      sourceList: [
        { id: '10000', label: '市长信箱' },
        { id: '12306', label: '市人社局长信箱' },
        { id: '12333', label: '信访信息系统' },
        { id: '10010', label: '大联动' },
        { id: '12388', label: '人民网' },
        { id: '12580', label: '企业服务网' },
        { id: '10086', label: '公众信息网' }
      ],
      duration: null,
      date: null,
      sourceId: null,
      majorCatId: null
    }
  },
  mounted () {
    this.getGdBlTj()
    this.getGdly_w()
    this.getNrlb_w()
  },
  methods: {
    timeValChange () {
      this.getGdBlTj()
      this.getGdly_w()
      this.getNrlb_w()
    },
    // 获取数据 本周工单办理量统计
    async getGdBlTj () {
      let year =
        this.selectTimeVal != '' && this.selectTimeVal != null
          ? this.selectTimeVal
          : ''
      const res = await this.$api.getWeekGdBlTj(year)
      console.log(res)
      this.WeekGdBlTj = res
      this.timeFrame = res.dateStr
      let data1 = []
      let data2 = []
      res.cats.forEach(item => {
        data1.push(item.majorCatName)
        let obj = {
          value: item.count,
          majorCatId: item.majorCatId,
          name: item.majorCatName
        }
        data2.push(obj)
      })
      const zb_chartDom1 = document.getElementById('bumen_card1Echart')
      const zb_myChart1 = echarts.init(zb_chartDom1)
      const zb_option1 = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return (
              params.seriesName +
              '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: ' +
              params.color +
              ';margin-right:5px;"></span>' +
              params.name +
              '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
              params.value +
              '</span><span style="font-size: 10px;"> 件</span>'
            ) // 鼠标悬浮显示的字符串内容
          }
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: data1,
          selectedMode: false
        },
        color: ['#5764ff', '#ff5a82', '#34e2ed', '#f1f2f6'],
        series: [
          {
            name: '本周工单办理量',
            type: 'pie',
            radius: '50%',
            center: ['50%', '45%'],
            selectedMode: 'single',
            data: data2,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            cursor: 'auto'
          }
        ]
      }
      zb_option1 && zb_myChart1.setOption(zb_option1)
      window.addEventListener('resize', () => {
        zb_myChart1.resize()
      })
    },
    // 获取数据 本周工单来源统计
    async getGdly_w () {
      const that = this
      let year =
        this.selectTimeVal != '' && this.selectTimeVal != null
          ? this.selectTimeVal
          : ''
      let timeArray = []
      if (this.selectTimeVal != '' && this.selectTimeVal != null) {
        timeArray = this.selectTimeVal.split('-')
      }
      const res = await this.$api.getWeekGdly_w(year)
      let data1 = []
      let data2 = []
      res.forEach(item => {
        data1.push(item.typeName)
        data2.push(item.count)
      })
      const zb_chartDom2 = document.getElementById('bumen_card2Echart')
      const zb_myChart2 = echarts.init(zb_chartDom2)
      const zb_option2 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            return (
              params[0].name +
              '<br/><span style="display: inline-block;width:10px;height:10px;border-radius:100%;background: #8565ff;margin-right:5px;"></span>' +
              params[0].seriesName +
              '<span style="display: inline-block;width: 14px;"></span><span style="font-weight: bold;">' +
              params[0].value +
              '</span><span style="font-size: 10px;"> 件</span>'
            ) // 鼠标悬浮显示的字符串内容
          }
        },
        color: ['#8565ff'],
        grid: {
          left: '20px',
          right: '25px',
          bottom: '40px',
          top: '20px',
          containLabel: true
        },
        textStyle: {
          color: '#666'
        },
        xAxis: [
          {
            type: 'category',
            data: data1,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0, // 标签设置为全部显示
              formatter: function (params) {
                var newParamsName = '' // 最终拼接成的字符串
                var paramsNameNumber = params.length // 实际标签的字数
                var provideNumber = 8 // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = '' // 表示每一次截取的字符串
                    var start = p * provideNumber // 开始截取的位置
                    var end = start + provideNumber // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params
                }
                // 将最终的字符串返回
                return newParamsName
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            max: function (value) {
              if (value.max == 0) {
                return 5
              }
            }
          }
        ],
        series: [
          {
            name: '总计',
            type: 'bar',
            barWidth: '24px',
            data: data2,
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                if (params.data > 0) {
                  return params.data
                } else {
                  return ''
                }
              },
              color: '#8565ff'
            }
          }
        ]
      }
      zb_option2 && zb_myChart2.setOption(zb_option2)
      window.addEventListener('resize', () => {
        zb_myChart2.resize()
      })
      zb_myChart2.on('click', function (param) {
        that.sourceList.forEach(item => {
          if (param.name === item.label) {
            that.sourceId = item.id
            that.orderListChange('week')
          }
        })
      })
    },
    // 获取数据 诉求量较多工单分类统计
    async getNrlb_w () {
      let year =
        this.selectTimeVal != '' && this.selectTimeVal != null
          ? this.selectTimeVal
          : ''
      const res = await this.$api.getWeekNrlb_w(year)
      console.log(res)

      this.card3Data = []
      res.forEach(item => {
        let obj = {
          majorCatId: item.majorCatId,
          describe: item.majorCatName,
          percentage: item.pct,
          count: item.count
        }
        this.card3Data.push(obj)
      })
    },
    orderListChange (duration, orderDate) {
      // 年月日类型
      this.duration = duration
      // 时间
      this.date =
        this.selectTimeVal != '' && this.selectTimeVal != null
          ? this.selectTimeVal
          : ''
      // 内容类别
      if (orderDate) {
        if (orderDate.describe == '其他') {
          let idArr = this.card3Data.map(item => {
            return item.majorCatId
          })
          this.majorCatId = idArr.filter(Boolean)
        } else {
          this.majorCatId = orderDate.majorCatId
        }
      }

      this.orderListShow = true
    },
    clearSearch () {
      this.duration = null
      this.date = null
      this.sourceId = null
      this.majorCatId = null
    }
  }
}
</script>

<style lang="less" scoped>
.searchBox {
  height: 60px;
  line-height: 60px;
  background: #e5f1fb;
  padding: 0 30px 0 20px;
  .search_l_bg {
    width: 6px;
    left: 0;
    top: 0;
    height: 100%;
  }
  .resetBtn {
    width: 90px;
    height: 36px;
  }
}
.el-card {
  width: 100%;
  height: 100%;
}
.card1 {
  width: 810px;
  height: 360px;
  .bumen_card1Echart {
    width: 380px;
    height: 300px;
  }
  .card1Echart_l {
    margin-left: 100px;
    color: #8593c2;
    .number {
      color: #364064;
      margin-bottom: 6px;
    }
    .trendImg {
      width: 14px;
      margin-left: 5px;
    }
  }
}
.card2 {
  width: 850px;
  height: 360px;
  .bumen_card2Echart {
    width: 820px;
    height: 300px;
  }
  .company {
    top: 60px;
    left: 40px;
  }
}
.card3 {
  .wordOrderList {
    margin-top: 15px;
    .wordTypeItem {
      width: calc((100% - 80px) / 4);
      padding-top: 60px;
      padding-bottom: 35px;
      .describeTitle {
        height: 60px;
      }
      .describe {
        color: #8593c2;
      }
    }
  }
}
</style>
<style lang="less">
.card3 {
  .wordTypeItem .el-progress-bar__outer {
    background-color: #ebeef5;
  }
  .wordTypeItem:nth-child(1) {
    .el-progress-bar__inner {
      background-color: #5764ff !important;
    }
    .describe {
      div {
        color: #5764ff !important;
      }
    }
  }
  .wordTypeItem:nth-child(2) {
    .el-progress-bar__inner {
      background-color: #e65aff !important;
    }
    .describe {
      div {
        color: #e65aff !important;
      }
    }
  }
  .wordTypeItem:nth-child(3) {
    .el-progress-bar__inner {
      background-color: #5ac7ff !important;
    }
    .describe {
      div {
        color: #5ac7ff !important;
      }
    }
  }
  .wordTypeItem:nth-child(4) {
    .el-progress-bar__inner {
      background-color: #ff5a82 !important;
    }
    .describe {
      div {
        color: #ff5a82 !important;
      }
    }
  }
}
</style>
